<template>
  <div class="overlay"></div>
  <el-form :model="form" :rules="rules" ref="formRef" label-width="100px" class="forgot-password-form">
    <el-row class="form-container">
      <h2>忘记密码</h2>

      <el-input v-model="form.email" placeholder="请输入注册邮箱" required name="email" style="margin-top: 20px;"></el-input>

      <el-button type="primary" @click="handleSubmit" style="margin-top: 20px;">发送重置链接</el-button>

      <div class="footer">
        <p>记得密码了？<router-link to="/">登录</router-link></p>
      </div>
    </el-row>
  </el-form>
</template>

<script>
import axios from "axios";

export default {
  name: "ForgotPassword",
  data() {
    return {
      form: {
        email: "",
      },
      rules: {
        email: [{ required: true, message: "请输入注册邮箱", trigger: "blur" }],
      },
    };
  },
  methods: {
    handleSubmit() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.sendResetLink();
        } else {
          this.$message.error("表单验证失败");
        }
      });
    },
    sendResetLink() {
      axios
        .post("http://localhost:8181/user/forgot-password", { email: this.form.email })
        .then((response) => {
          if (response.data.success) {
            this.$message.success("重置链接已发送到您的邮箱");
            this.$router.push("/login");
          } else {
            this.$message.error("邮箱未注册");
          }
        })
        .catch((error) => {
          console.error("发送失败", error);
          this.$message.error("发送重置链接失败");
        });
    },
  },
};
</script>

<style src="../assets/style/ForgotPassword.css" scoped>

</style>
